<template>
  <div>
    <el-container>
      <el-main>
        <el-row>
          <el-col :span="12" class="fir_col"></el-col>
        </el-row>
        <el-row class="sec_row">
          <el-col class="sec_row_col1" :span="6">
            <div>
              <div class="demo-image__placeholder">
                <div class="block">
                  <span class="demonstration"></span>
                  <el-image 
                    :src="stall.photo"
                    style="width: 300px; height: 500px"
                  >
                    <div slot="placeholder" class="image-slot">
                      加载中<span class="dot">...</span>
                    </div>
                  </el-image>
                </div>
              </div>
            </div>
            <div>
              <el-upload
                class="upload-demo"
                action="img"
                :http-request="uploadSectionFile"
                 :before-upload="beforeAvatarUpload"
              >
                <el-button size="small" type="primary">更换车位图片</el-button>
              </el-upload>
            </div>
          </el-col>
          <el-col class="sec_row_col2" :span="12">
            <el-form
              ref="stall"
              :model="stall"
              label-width="80px"
              :rules="rules"
            >
              <div style="text-align: right">
                <el-form-item>
                  <el-switch
                    v-model="value1"
                    active-text="出租车位"
                    inactive-text="停止租用"
                    :disabled="
                      this.stall.stall_state == '出租中' ? true : false
                    "
                    @change="changeStallState()"
                  >
                  </el-switch>
                </el-form-item>
              </div>
              <el-form-item label="小区选择">
                <el-select
                  v-model="form.region"
                  placeholder="选择小区"
                  @change="getselected(form.region)"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in managements"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="车位编号">
                <el-select
                  v-model="form.region1"
                  placeholder="选择车位编号"
                  @change="getStall(form.region1)"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in stalls"
                    :key="item.stall_id"
                    :label="item.stall_code"
                    :value="item.stall_id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <!-- <el-form-item label="车位大小">
                <el-input
                  v-model="stall.stall_size"
                  placeholder="车位大小"
                   :disabled="
                      this.stall.stall_state == '出租中' ? true : false
                    "
                ></el-input>
              </el-form-item> -->

              <el-form-item label="车位大小">
                <!-- <el-input
                  v-model="stall.stall_size"
                  placeholder="车位大小"
                ></el-input> -->
                <el-select
                  v-model="stall.stall_size"
                  placeholder="车位大小"
                  filterable
                  :disabled="this.stall.stall_state == '出租中' ? true : false"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in stallSizes"
                    :key="item.key"
                    :label="item.value"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="车位状态">
                <el-input
                  v-model="stall.stall_state"
                  placeholder="状态"
                  :disabled="true"
                ></el-input>
              </el-form-item>
              <el-form-item label="车位价格" prop="stall_price">
                <el-input
                  v-model="stall.stall_price"
                  placeholder="车位价格"
                  :disabled="this.stall.stall_state == '出租中' ? true : false"
                ></el-input>
              </el-form-item>

              <el-form-item label="车位描述">
                <el-input
                  v-model="stall.evaluate"
                  placeholder="车位描述"
                ></el-input>
              </el-form-item>

              <!-- <el-form-item label="车位图片">
                <el-input
                  v-model="stall.photo"
                  placeholder="车位图片"
                ></el-input>
              </el-form-item> -->

              <el-form-item>
                <el-button type="primary" @click="saveStall('stall')" round
                  >更新车位</el-button
                >
                <!-- <el-button type="success" @click="onSubmit" round
                  >添加车位</el-button
                > -->
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stallSizes: [
        { key: 1, value: "大" },
        { key: 2, value: "中" },
        { key: 3, value: "小" },
      ],
      rules: {
        stall_price: [
          { required: true, message: "请输入车位价格", trigger: "blur" },
          {
            pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,
            message: "请输入正确的价格",
          },
        ],
      },

      uid: "",
      form: {
        name: "",
        region: "",
        region1: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      input: "",
      stalls: [],
      stall: {
        stall_id: "",
        stall_size: "",
        stall_code: "",
        stall_price: "",
        evaluate: "",
        photo: "",
        management_id: "",
        stall_user_id: "",
        stall_state: "",
      },
      managements: "",
      value1: true,
    };
  },
  methods: {

      beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    uploadSectionFile(params) {
      // this.stall.photo = params.file;
      let formData = new FormData();
      formData.append("stall_id", this.stall.stall_id);
      formData.append("stall_photo", params.file);
      let config = { 
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      this.addDialogFormVisible = false;
      this.$axios
        .put("/img", formData, config)
        .then((res) => {
          //alert(this.stall.photo);
          this.stall.photo = res.data.data+'?' + new Date().getTime();
          
        })
        .catch((err) => {

        });
    },
    onSubmit() {
      console.log("submit!");
    },

    onLoadManagements() {
      console.log(1);
      this.$axios
        .get("/managementsbyUid/" + sessionStorage.getItem("userId"))
        .then((res) => {
          this.managements = res.data.data;
        })
        .catch((err) => {});
    },
    getselected(data) {
      this.$axios
        .post("/getStall", {
          uid: sessionStorage.getItem("userId"),
          mid: data,
        })
        .then((res) => {
          this.stalls = res.data.data;
        })
        .catch((err) => {});
    },

    getStall(data) {
      for (var i = 0; i < this.stalls.length; i++) {
        if (this.stalls[i].stall_id == data) {
          this.stall = this.stalls[i];
          if (this.stall.stall_state == "停用") {
            this.value1 = false;
          } else {
            this.value1 = true;
          }
        }
      }
    },

    changeStallState() {
      if (this.value1 == true) {
        this.stall.stall_state = "空闲";
      } else {
        this.stall.stall_state = "停用";
      }
    },

    saveStall(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .put("/stall", this.stall)
            .then((res) => {
      
               this.$message({
                message: res.data.messages,
                type: "success",
              });
            })
            .catch((err) => {
              this.$message({
                message: err.data.messages,
                type: "warning",
              });
            });
        } else {
          alert("信息填写错误");
        }
      });
    },
  },

  mounted() {
    this.onLoadManagements();
  },
  watch: {},
};
</script>

<style>
.sec_row {
  height: 100px;
  text-align: top;
}
.sec_col_row {
  height: 50px;
}
.sec_col1 {
  background-color: pink;
}
</style>